<template>
	<view class="">
		<view style="padding: 5% 5% 0 5%;">
			<view class="" style="display: flex;border-bottom: 1px solid #aaa;padding-bottom: 4%;">
				<image :src="reImg(goods.userId.img[0])" mode="widthFix" class="userImg"></image>
				<view class="">
					<view class="userName">{{ goods.userId.nickName }}</view>
					<view class="time">{{ reTime(goods.time) }}发布</view>
				</view>
			</view>
			<view class="price">
				<span style="font-size: 28rpx;">￥</span>
				{{ goods.price }}
			</view>
			<view class="desc">{{ goods.desc }}</view>
			<view class="goodsImg">
				<image v-for="item in goods.images" :key="item._id" :src="reImg(item)" mode="widthFix" class="images">
				</image>
			</view>
		</view>

		<!-- 留言 -->
		<view style="height: 20rpx;background-color: #F2F2F2;"></view>
		<view class="" style="padding:5%;">
			<view class="">
				全部留言
			</view>
			<view class="msg">
				<image :src="reImg(goods.userId.img[0])" mode="" style="width: 50rpx;height: 50rpx;border-radius: 50%;">
				</image>
				<input type="text" v-model="content" class="msg" placeholder="看对眼就留言..." />
				<!-- 留言按钮 -->
				<view @click="submitMsg" class="msgBtn">
					<text>留言</text>
				</view>
			</view>
		</view>
		<view class="w-msg" style="height: 100%;">
			<template v-for="item in messages">
				<w-message :nickName="item.userId.nickName" :message="item.content" :_id="item._id"
					:time="retime(item.time)" :img="reg(item.userId.img[0])" :key="item._id">
				</w-message>
			</template>
		</view>

		<!-- 给底部留出距离 -->
		<view style="height: 20rpx;background-color: #F2F2F2;"></view>
		<view class="" style="margin-bottom: 100rpx;height: 1px;"></view>
		<view class="bottomInfo">
			<view class="b-left">
				<view class="it">
					<image src="../../static/icon/dz.png" mode="" class="icon" @click="test"></image>
					<view class="">
						超赞
					</view>
				</view>
				<view class="it">
					<image src="../../static/icon/msg.png" mode="" class="icon"></image>
					<view class="">
						留言
					</view>
				</view>
				<view class="it">
					<image src="../../static/icon/sz.png" mode="" class="icon"></image>
					<view class="">
						收藏
					</view>
				</view>
			</view>
			<view class="">
				<van-button size="mini" @click="buy" round="true" color="linear-gradient(to right, #ff6034, #ee0a24)">
					购买
				</van-button>
			</view>
		</view>
		<!-- 弹框 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000">
			</uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import goodsApi from '../../api/goods';
	import config from '../../utils/config';
	import times from '../../utils/time';
	import msgApi from '../../api/message.js';
	export default {
		data() {
			return {
				goods: this.$store.state.goods,
				messages: [],
				content: '',
				msgType: "",
				messageText: ""
			};
		},
		methods: {
			reImg(img) {
				let regimg = /^http/;
				if (regimg.test(img)) {
					return img
				} else {
					return config['resource_server'] + img;
				}
			},
			reTime(time) {
				return times.getFormatTime(Date.parse(time));
			},
			test() {
				console.log(this.goods)
			},
			reg(img) {
				let regimg = /^http/;
				if (regimg.test(img)) {
					return img
				} else {
					return config['resource_server'] + img;
				}
			},
			retime(time) {
				return times.getFormatTime(time)
			},
			submitMsg() {
				if (this.content != '') {
					let message = {
						userId: this.$store.getters['user/get_id'],
						articleId: this.goods._id,
						content: this.content,
						time: new Date().getTime()
					}
					msgApi.addMsg(message, (res) => {
						console.log(res);
						if (res.statusCode === 200) {
							this.msgType = "success";
							this.messageText =
								` 留言添加成功 `;
							this.$refs.message.open()
							this.content = ''
							this.getMessage()
						}
					})
				} else {
					uni.showModal({
						content: "请输入留言内容",
						showCancel: false,
						confirmColor: "#78cdd1"
					})
				}
			},

			getMessage() {
				// 获取商品所有的留言
				msgApi.getByGoodId({
					_id: this.goods._id,
					cb: (data) => {
						console.log('data====>', data);
						this.messages = data;
					}
				})
			},
			// 购买按钮
			buy() {
				let state = this.goods.userId._id == this.$store.getters['user/get_id'];
				console.log(state)
				if (state) {
					this.msgType = "warn";
					this.messageText ='这是你的商品' ;
					this.$refs.message.open()
				} else {
					uni.navigateTo({
						url: '/pages/buy/buy'
					})
				}
			}
		},
		mounted() {
			this.getMessage()
		},
		onLoad(options) {},
		beforeCreate() {}
	};
</script>

<style lang="scss" scoped>
	.userImg {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}

	.userName {
		font-size: 44rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
	}

	.time {
		font-size: 24rpx;
		color: #aaa;
	}

	.price {
		margin: 40rpx 0;
		color: #d71345;
		font-weight: 700;
		font-size: 40rpx;
	}

	.desc {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 30rpx;
	}

	.images {
		width: 100%;
		border-radius: 20rpx;
		border-bottom: 1rpx solid #78cdd1;
		margin-bottom: 20rpx;
	}

	.msg {
		flex: 1;
		height: 40rpx;
		margin-left: 20rpx;
		background-color: #F2F2F2;
		border-radius: 20rpx;
		padding: 30rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}

	.bottomInfo {
		box-sizing: border-box;
		padding: 2% 5%;
		position: fixed;
		width: 100%;
		height: 100rpx;
		bottom: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.msgBtn {
		margin-left: 10rpx;
		width: 80rpx;
		height: 40rpx;
		border-radius: 20rpx;
		text-align: center;
		line-height: 40rpx;
		background-color: #78cdd1;
	}

	.msgBtn>text {
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.b-left {
		display: flex;
		font-size: 24rpx;
		font-weight: 200;
	}

	.it {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 30rpx;
		text-align: center;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 5rpx;
	}
</style>
